<template>
	<view class="">
		<view class="u-p-20">
			<u-search placeholder="请输入搜索内容" v-model="params.keyword" :show-action="false" @blur="searchBlur"></u-search>
		</view>
		<view class="u-flex u-row-between bg_FFFFFF u-p-l-20 u-p-r-20">
			<view class="u-h-100">
				<view class="u-m-t-30" style="border-left: 10rpx solid red;padding-left: 30rpx;">
					充值记录
				</view>
			</view>
			<!-- <u-button size="mini">全部</u-button> -->
			<view class="u-b-r-14 u-flex u-row-between" style="border: 1rpx solid #FF5502; padding: 10rpx;"
				@click="show=true">
				<view class="u-flex">
					<u-image src='https://www.sqkjkj.vip/wxImg/mybag/img1.png' width='28rpx' height='28rpx'></u-image>
					<view class="u-m-l-10 u-font-28" style="padding-right: 20rpx;">
						{{params.s_time==''?'请选择时间':`${params.s_time}-${params.e_time}`}}
					</view>
				</view>

				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<u-tabs :list="list1" :is-scroll="false" :current="params.all" @change="change1"></u-tabs>
		<view class="u-p-20">
			<view class="bg_FFFFFF u-p-20 u-b-r-16 ">
				<view class="u-p-t-20 u-p-b-20" style="border-bottom: 1rpx solid  #F1F2F6;" v-for='(item,index) in list'
					:key="item.id">
					<view class="u-flex u-row-between">
						<view class="u-weight" v-if="item.is_new&&item.is_new==1">
							{{item.type==1?'代缴费-充话费':item.type==2?'代缴费-充燃气':item.type==3?'代缴费-充电费':item.type==4?'代缴费-充水费':''}}
						</view>
						<view class="u-weight" v-else>
							{{item.type==1?'充话费':item.type==2?'充燃气':item.type==3?'充电费':item.type==4?'充水费':''}}
						</view>
						<view class="u-flex">
							{{item.status_text}}
							<view style="color: #65d959;" v-if="item.status_text==='部分退款'">(￥{{item.refund_portion_money}})</view>
						</view>
					</view>
					<view class="u-m-t-10 u-font-28 ">
						<!-- {{item.type==1?item.mobile || '':item.type==2?item.gas || '':item.type==3?item.elec_no || '':''}} -->
						<text v-if="item.type==1 && item.mobile">
							手机号：{{item.mobile || ''}}
						</text>
						<text v-if="item.type==2 && item.gas_no">
							燃气账号：{{item.gas_no || ''}}
						</text>
						<text v-if="item.type==3 && item.elec_no">
							<block v-if="item.area_name">省份：{{item.area_name || ''}}</block> 电费账号：{{item.elec_no || ''}}
						</text>
						<text v-if="item.type==4 && item.elec_no">
							水费账号：{{item.elec_no || ''}}
						</text>
					</view>
					<view class="u-m-t-10 u-flex u-row-between u-font-28">
						<view style="color: #A5A6AC;">
							{{item.create_date}}
						</view>
						<view class="cl_FF5502FF">
							￥{{item.pay_money}}
						</view>
					</view>
					<view v-if="item.status === 3||item.status === 5" class="u-m-t-10 u-font-28">
						<view>拒绝理由：{{ item.refuse_reason || '' }}</view>
						<!-- <view style="color: #A5A6AC;">
							{{ item.update_time || item.create_date }}
						</view> -->
					</view>
					<view class="u-m-t-10 u-font-28">
						<view>最后状态变更时间：{{ item.update_time  }}</view>

					</view>

					<view v-if="item.status === 2" class="u-m-t-10 u-font-28 u-flex u-row-right">
						<u-button type="primary" size="mini" @click="handlePay(item)">再次充值</u-button>
					</view>
				</view>

				<!-- 加载更多 -->
				<u-loadmore :status="status" icon-type="circle" margin-top="20" margin-bottom="20" />
			</view>


		</view>

		<!-- 日历窗口 -->
		<u-calendar v-model="show" :mode="mode" @change='change'></u-calendar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					type: "",
					keyword: '',
					page: 1,
					page_size: 10,
					s_time: '',
					e_time: '',
					all: 0
				},
				list: [],
				show: false,
				mode: 'range',
				status: 'loadmore',
				list1: [{
					name: '默认'
				}, {
					name: '全部'
				}]
			}
		},
		onLoad(load) {
			this.params.type = load.type
			this.params.is_new = load.is_new || 0

		},
		onShow() {
			this.clear()
			this.massage()
		},
		// 下拉到底事件
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.massage();
		},
		methods: {
			handlePay(item) {
				const type = item.type
				let params = {}
				switch (type) {
					case 1:
						params = {
							lifeType: type,
							mobile: item.mobile,
							mobile_type: item.mobile_type,
							// money_id: item.money_id
						}
						break;
					case 2:
						params = {
							lifeType: type,
							// money_id: item.money_id,
							gas_no: item.gas_no,
							gas_company: item.gas_company,
							companyName: item.companyName
						}
						break;
					case 3:
						params = {
							lifeType: type,
							// money_id: item.money_id,
							elec_no: item.elec_no,
							elec_name: item.elec_name,
							area_id: item.area_id,
							area_name: item.area_name,

						}
						break;
				}

				const entries = Object.entries(params);
				let url = '/subcontract/Rechargemoney2/Rechargemoney2?toUrl=list'
				for (const [key, value] of entries) {
					url += `&${key}=${value}`
				}
				uni.reLaunch({
					url,
					fail: (err) => {
						console.log(err)
					}
				});
			},
			change1(e) {
				this.params.all = e;
				this.clear()
				this.massage()
				console.log(e)
			},
			searchBlur() {
				this.clear()
				this.massage()
			},
			clear() {
				this.list = [];
				this.params.page = 1;
			},
			massage() {
				this.$api.pay_my_phone_list2(this.params, res => {
					if (res.data.code == 1) {
						if (res.data.data.recharge_list.length < 10) {
							this.status = 'nomore';
						} else {
							this.params.page = this.params.page + 1;
							this.status = 'loadmore';
						}
						this.list = this.list.concat(res.data.data.recharge_list);
						uni.stopPullDownRefresh();
					}
				})
			},
			change(e) {
				this.params.s_time = e.startDate
				this.params.e_time = e.endDate
				this.clear()
				this.massage()
			}

		}
	}
</script>

<style scoped>
	page {
		background: #f5f5f5;
	}
</style>